<template>
	<div class="warningInfo-regional-main">
		<div class="warningInfo-label">
			{{ title }}
		</div>
		<div class="warningInfo-regional-list">

			<div v-for="(processItem, processIndex) in data" :key="processItem.processIndex" :class="['warningInfo-regional-list-item', { 'full-width-item': processIndex === data.length - 1 }]">
				<img :src="areaTem[processIndex].icon" :width="areaTem[processIndex].width?areaTem[processIndex].width:32" alt="404" />
				<div class="warningInfo-regional-list-item-box">
					<div>{{ processItem.processName }}</div>
					<div
						v-for="(areaItem, areaIndex) in processItem.itemList"
						:key="areaIndex"
						class="warningInfo-regional-list-item-flex"
					>
						<span :style="{ color: !areaItem.temState ? '#FF0000FF' : '#19be6b' }">{{ areaItem.temValue || 0 }}<span>℃</span></span>
						<span :style="{ color: !areaItem.humState ? '#FF0000FF' : '#19be6b' }">{{ areaItem.humValue || 0 }}<span>%</span></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import technology1 from '@/assets/images/warningInfo/technology1.png';
    import technology2 from '@/assets/images/warningInfo/technology2.png';
    import technology3 from '@/assets/images/warningInfo/technology3.png';
    import technology4 from '@/assets/images/warningInfo/technology4.png';
    import technology5 from '@/assets/images/warningInfo/technology5.png';
    import technology6 from '@/assets/images/warningInfo/technology6.png';

    export default {
        props: {
            data: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                areaTem: [
                    {
                        icon: technology1
                    },
                    {
                        icon: technology2
                    },
                    {
                        icon: technology3
                    },
                    {
                        icon: technology4
                    },
                    {
                        icon: technology5
                    },
                    {
                        icon: technology5
                    },
                    {
                        icon: technology6
                    }],
                title: '区域温湿度监控'
            };
        },
        methods: {

        }

    };
</script>
<style scoped lang="scss">
@import "../index";
</style>
